<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="主要配置" name="MainConfig">

      <el-divider border-style="dashed" content-position="left">1.0模式 邀请人分润配置</el-divider>

      <el-form-item label="邀请人商城：">
        <el-input-number v-model="configValue.inviterRatio" :disabled="readonly" :min="0" :max="1" :precision="3" :step="0.01" controls-position="right" placeholder="请输入分润比例"/>
        <span class="tip">{{ toPercent(configValue.inviterRatio || 0.00) }} 商城订单邀请人分润占比</span>
      </el-form-item>

      <el-form-item label="邀请人本地：">
        <el-input-number v-model="configValue.inviterRatioStore" :disabled="readonly" :min="0" :max="1" :precision="3" :step="0.01" controls-position="right" placeholder="请输入分润比例"/>
        <span class="tip">{{ toPercent(configValue.inviterRatioStore || 0.00) }} 本地订单邀请人分润占比</span>
      </el-form-item>

    </el-tab-pane>

    <el-tab-pane label="红包配置" name="PacketConfig">
      <el-divider border-style="dashed" content-position="left">红包范围值配置</el-divider>

      <el-form-item label="最小范围比：">
        <el-input-number v-model="configValue.packetScopeRatioMin" :disabled="readonly" :min="0.01" :max="1" :precision="2" :step="0.01" controls-position="right" placeholder="请输入比例"/>
        <span class="tip">{{ toPercent(configValue.packetScopeRatioMin || 0.00) }}</span>
      </el-form-item>

      <el-form-item label="最大范围比：">
        <el-input-number v-model="configValue.packetScopeRatioMax" :disabled="readonly" :min="1" :max="3" :precision="2" :step="0.01" controls-position="right" placeholder="请输入比例"/>
        <span class="tip">{{ toPercent(configValue.packetScopeRatioMax || 0.00) }}</span>
      </el-form-item>

      <el-divider border-style="dashed" content-position="left">红包最小值配置</el-divider>

      <el-form-item label="用户最小值：">
        <el-input-number v-model="configValue.packetMinAmountUser" :disabled="readonly" :min="0.01" :precision="2" :step="0.01" controls-position="right" placeholder="请输入"/>
        <span class="tip">用户红包最小金额</span>
      </el-form-item>

      <el-form-item label="商户最小值：">
        <el-input-number v-model="configValue.packetMinAmountShop" :disabled="readonly" :min="0.01" :precision="2" :step="0.01" controls-position="right" placeholder="请输入"/>
        <span class="tip">商户红包最小金额</span>
      </el-form-item>

      <el-divider border-style="dashed" content-position="left">抢红包时间范围</el-divider>

      <el-form-item label="时间范围：">
        <el-time-select style="width: 12rem;margin-right: 6px" v-model="configValue.packetScopeTime1"
                        placeholder="开始时间"
                        start="06:00"
                        step="00:05"
                        end="23:59"
                        :max-time="configValue.packetScopeTime2">
        </el-time-select>
        至
        <el-time-select style="width: 12rem;margin-left: 6px" v-model="configValue.packetScopeTime2"
                        placeholder="结束时间"
                        start="06:00"
                        step="00:05"
                        end="23:59"
                        :min-time="configValue.packetScopeTime1">
        </el-time-select>
      </el-form-item>

      <el-divider border-style="dashed" content-position="left">自动发红包配置(占当天营业额的比例)</el-divider>

      <el-form-item label="发送时间：">
        <el-time-select style="width: 12rem;margin-right: 6px" v-model="configValue.packetAutoSendTime"
                        placeholder="红包发送时间"
                        start="06:00"
                        step="00:01"
                        end="23:59">
        </el-time-select>
      </el-form-item>

      <el-form-item label="用户占比：">
        <el-input-number v-model="configValue.packetAutoSendUserRatio" :disabled="readonly" :min="0" :max="0.3" :precision="2" :step="0.01" controls-position="right" placeholder="请输入比例"/>
        <span class="tip">{{ toPercent(configValue.packetAutoSendUserRatio || 0.00) }}</span>
      </el-form-item>

      <el-form-item label="商户占比：">
        <el-input-number v-model="configValue.packetAutoSendShopRatio" :disabled="readonly" :min="0" :max="0.3" :precision="2" :step="0.01" controls-position="right" placeholder="请输入比例"/>
        <span class="tip">{{ toPercent(configValue.packetAutoSendShopRatio || 0.00) }}</span>
      </el-form-item>

      <el-divider border-style="dashed" content-position="left">自动发红包数量配置 注: 配置为0时按预估数量发送</el-divider>

      <el-form-item label="用户红包数：">
        <el-input-number v-model="configValue.packetAutoSendUseNum" :disabled="readonly" :min="0" :precision="0" :step="1" controls-position="right" placeholder="请输入红包数"/>
      </el-form-item>

      <el-form-item label="商户红包数：">
        <el-input-number v-model="configValue.packetAutoSendShopNum" :disabled="readonly" :min="0" :precision="0" :step="1" controls-position="right" placeholder="请输入红包数"/>
      </el-form-item>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { toPercent } from '@/utils';

defineOptions({name: 'CapitalRuleConfig'})

const props = defineProps({
  configValue: {
    type: Object,
    required: true
  },
  configType: {
    type: Number,
    default: 0,
    required: true
  },
  readonly: {
    type: Boolean,
    default: false
  },
});

const activeName = ref('MainConfig');
</script>

<style lang="scss" scoped>

</style>
